<template>
	<e-popup  :show="show"  @cancel="$emit('close')" bgColor="transparent" >
		<view class="app-public-msg-detail-tool-order-popup">
			<view class="e-p-t-28 e-p-b-28  e-rela">
				<view class="text-center">
					<text class="e-font-32 fw-600 text-center">{{toI18('public.selectOrder')}}</text>
				</view>
				<image src="/pages/public/static/msg/close.png" class="app-public-msg-detail-tool-order-popup__close img-30 e-abso" @tap="$emit('close')"></image>
			</view>
			<scroll-view class="app-public-msg-detail-tool-order-popup__scroll" :style="scrollStyle" scroll-y @scrolltolower="getData" lower-threshold="60">
				
				<view class="app-public-msg-detail-tool-order-popup__scroll__order e-m-b-20 bg-white e-radius-20 overflow-hidd e-p-24" v-for="order in list" :key="order.id">
					<view class="e-p-r-18">
						<load-image :size="['144rpx']" radius="10rpx"  :src="order.commodityUrl"></load-image>
					</view>
					<view class="app-public-msg-detail-tool-order-popup__scroll__order-right  ">
						<view class="app-public-msg-detail-tool-order-popup__scroll__order-right__top">
							<view class="app-public-msg-detail-tool-order-popup__scroll__order-right__top-left">
								<text class="e-line-2">{{order.commodityName}}</text>
							</view>
							<view class="e-m-l-58">
								<view >
									<text >{{unitEn}}{{order.deputyMoney}}</text>
								</view>
								<view >
									<text class="c-secondary text-right">x{{order.commodityCount}}</text>
								</view>
							</view>
						</view>
						<view class="app-public-msg-detail-tool-order-popup__scroll__order-right__bottom" >
							<view >
								
								<text class="c-secondary">{{order.commoditySpecName}}</text>
							</view>
							<e-button size="mini" plain  :color="primary" shape="circle" :text="toI18('public.send')"
								@click="$emit('send',order)" ></e-button>
						</view>
					</view>
					
				</view>
				<empty :text="toI18('user.暂无记录')" icon="/pages/public/static/msg/goods_default.png" v-if="isEmpty"></empty>
				<load-more v-else :showLoad="showLoad"></load-more>
				
			</scroll-view>
			
			
		</view>
	</e-popup>
</template>

<script lang="ts" setup>
	import {getIMOrderList,type IMOrderItem} from '@/common/request/api'
	import {useQueryPage} from '@/common/hooks'
	import {sys} from '@/common/utils'
	// #ifndef APP-NVUE
	import {
		useI18n
	} from '@/common/hooks'
	// #endif
	
	const props = defineProps({
		show:Boolean,
		unitEn:String,
		primary:String,
		storeId:String,
	})
	
	// #ifdef APP-NVUE
	const toI18 = getApp().globalData.$t
	// #endif
	// #ifndef APP-NVUE
	const toI18 = useI18n('')
	// #endif
	
	
	
	
	const scrollStyle = {
		height:`${sys().windowHeight - 138}px`
	}

	const {showLoad,
		list,
		isEmpty,
		handleQueryPage,
		handleRefresh} =  useQueryPage<IMOrderItem>({
		api: getIMOrderList,
		option:{
			params:{
				storeId:props.storeId
			},
			responseKey:'data.rows',
			totalKey:'data.total',
		}
	})
	
	const getData = () => {
		handleQueryPage()
	}

	
	handleRefresh()
	
</script>

<style lang="scss" scoped>
	@include appBem_b(public-msg-detail-tool-order-popup){
			width:750rpx;
			background: #F7F7F7;
			border-radius: 20rpx 20rpx 0 0 ;
			@include appBem_e(close){
				top: 36rpx;
				right: 20rpx;
			}
			@include appBem_e(scroll){
				padding: 0 20rpx 32rpx 20rpx;
				&__order{
					@include flex;
					align-items: center;
					&-right{
						height: 144rpx;
						flex: 1;
						align-items: stretch;
						&__top{
							@include flex;
							flex: 1;
							justify-content: space-between;
							&-left{
								flex:1
							}
						}
						&__bottom{
							@include flex;
							flex: 1;
							align-items: flex-end;
							justify-content: space-between;
						}
					}
				}
			}
			
		
	}
</style>